<template>
  <!-- 普通输入框 -->
  <div
    :style="item.style || {}"
    :class="`form-unqiue-${item.key} ${getTextModel ? '' : 'wti-untext-box'}`"
    class="form-input-box form-item-box"
  >
    <!-- 这是三级联动选择框 -->
    <el-row v-if="!getTextModel">
      <el-col :span="8">
        <el-select
          v-model="val[0]"
          class="select"
          placeholder="请选择"
          :disabled="getDisabled"
          @change="(v) => onChange(v, '0')"
        >
          <el-option
            v-for="items in dynamicDict[item.firstParentKey || '10020']"
            :key="items[dynamicSelectOption.value]"
            :label="items[dynamicSelectOption.label]"
            :value="items[dynamicSelectOption.value]"
          />
        </el-select>
      </el-col>
      <el-col :span="8">
        <el-select
          v-model="val[1]"
          class="select"
          placeholder="请选择"
          :disabled="getDisabled"
          @change="(v) => onChange(v, '1')"
        >
          <el-option
            v-for="items in cityList"
            :key="items[dynamicSelectOption.value]"
            :label="items[dynamicSelectOption.label]"
            :value="items[dynamicSelectOption.value]"
          />
        </el-select>
      </el-col>
      <el-col :span="8">
        <el-select
          v-model="val[2]"
          class="select"
          placeholder="请选择"
          :disabled="getDisabled"
        >
          <el-option
            v-for="items in areaList"
            :key="items[dynamicSelectOption.value]"
            :label="items[dynamicSelectOption.label]"
            :value="items[dynamicSelectOption.value]"
          />
        </el-select>
      </el-col>
    </el-row>
    <div v-else :style="item.textStyle || {}" class="form-input-text">
      {{ areaText }}
    </div>
  </div>
</template>

<script>
import FormMixin from './mixin'

// 这个是已经耦合的，非通用组件
export default {
    name: 'FormAreaSelect',
    mixins: [FormMixin],
    data() {
        return {
            prependMsg: '',
            appendMsg: ''
        }
    },
    computed: {
        cityList() {
            const secondParentKey = this.item.secondParentKey || '10021'
            if (this.val[0]) {
                return this.dynamicDict[secondParentKey].filter(item => item.bparentCode === this.val[0])
            }

            return []
        },
        areaList() {
            const thirdParentKey = this.item.thirdParentKey || '10022'
            if (this.val[1]) {
                return this.dynamicDict[thirdParentKey].filter(item => item.bparentCode === this.val[1])
            }

            return []
        },
        areaText() {
            const firstParentKey = this.item.firstParentKey || '10020'
            const secondParentKey = this.item.secondParentKey || '10021'
            const thirdParentKey = this.item.thirdParentKey || '10022'

            return `${this.getText(firstParentKey, this.val[0])}${this.getText(secondParentKey, this.val[1])}${this.getText(thirdParentKey, this.val[2])}`
        }
    },
    methods: {
        onChange(v, index) {
            if (index === '0') {
                this.val[1] = ''
                this.val[2] = ''
            }
            if (index === '1') {
                this.val[2] = ''
            }
        },
        getText(pCode, val) {
            if (this.val[0]) {
                const t = this.dynamicDict[pCode].filter(item => item[this.dynamicSelectOption.value] === val)
                if (t.length === 0) {
                    return ''
                } else {
                    return t[0][this.dynamicSelectOption.label]
                }
            } else {
                return ''
            }
        }
    }
}
</script>
